<!DOCTYPE html>
<html ng-app="webapp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>W8</title>
    <script src="js/angular-1.4.8.min.js"></script>
</head>

<body>
    <div layout="row">
        <div flex="28">
            <a href="#home" class="btn btn-success btn-lg">Home</a>
            <br>
            <a href="#about" class="btn btn-danger btn-lg">About</a>
        </div>
        <div flex="71" ng-controller="myCtrl">
            <!-- 例1 -->
            <d1 greet="sayHello(u)"></d1>

            <d1 greet="nimei(u)"></d1>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
    var app = angular.module('webapp', []);
    app.controller('myCtrl', ['$scope', function($scope) {
        $scope.sayHello=(function(u){
            console.log(" Hi This is sayHello!! "+u);
        });

        $scope.nimei=(function(u){
            console.log(" 这里是你妹!!! " +u);
        });

    }]);

    app.directive("d1", function() {
        return {
            restrict: 'AE',
            scope: {
                greet: '&'
            },
            template: '<input type="text" ng-model="userName" /><br/>' +
                '<button class="btn btn-default" ng-click="greet({u:userName})">Greeting</button><br/>'
        }
    });
</script>
<style type="text/css">
.my-form {
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
    background: transparent;
}

.my-form.ng-invalid {
    background: red;
}

.s4 {
    border: 1px solid black;
    width: 250px;
}

.s4>.title {
    background-color: black;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.s4>.body {
    padding: .1em .3em;
}
</style>
